<template>
    <div id="user">
        <!-- 筛选 -->
        <div class="lyt-component-lg pb-0">
            <a-form layout="horizontal" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-row :gutter="10" type="flex">
                    <a-col :xl="6" :lg="8" :sm="12" :xs="24">
                        <a-form-item label="用户名">
                            <a-input v-model:value="filterData.name" />
                        </a-form-item>
                    </a-col>
                    <a-col :flex="1">
                        <div class="fr mb-24">
                            <a-button class="mr-10" @click="onGetUserList">重置</a-button>
                            <a-button type="primary" @click="onGetUserList">查询</a-button>
                        </div>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 表格 -->
        <div class="mt-24 lyt-component-0" id="user-table">
            <a-table
                :loading="userTableLoading"
                :scroll="{ x: 1260 }"
                :columns="userColumns"
                :data-source="userList"
                rowKey="_id"
                bordered
                :pagination="{ total: 3, pageSize: 10 }"
            >
                <template #number="{ index }">{{ index }}</template>
                <template #operation="{ record, index }">
                    <a class="mr-10" @click="onEditUser(record)">编辑</a>
                    <a-popconfirm title="是否确认删除？" placement="left">
                        <a href="#">删除</a>
                    </a-popconfirm>
                </template>
                <template #roleName="{ text }">
                    <a-tag color="processing" size="lage">{{ text }}</a-tag>
                </template>
                <template #gender="{ text }">
                    <a-tag :color="text === '男' ? '#2db7f5' : '#ffadd2'" size="lage">{{ text }}</a-tag>
                </template>
                <template #title>
                    <a-button type="primary" @click="onNewUser">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        添加用户
                    </a-button>
                </template>
            </a-table>
        </div>
        <!-- 添加编辑用户 -->
        <a-drawer
            :title="drawerTitle"
            placement="right"
            :width="winType === 'xs' ? '100%' : '560'"
            v-model:visible="drawerVisible"
        >
            <a-form layout="vertical" :model="userParams">
                <a-row :gutter="24">
                    <a-col :sm="12" :xs="24">
                        <a-form-item label="登录账号" required>
                            <a-input v-model:value="userParams.loginName" placeholder="请输入" />
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12" :xs="24">
                        <a-form-item label="用户名称" required>
                            <a-input v-model:value="userParams.name" placeholder="请输入" />
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12" :xs="24">
                        <a-form-item label="邮箱" required>
                            <a-input v-model:value="userParams.email" placeholder="请输入" />
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12" :xs="24">
                        <a-form-item label="手机号" required>
                            <a-input v-model:value="userParams.phone" placeholder="请输入" />
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12" :xs="24">
                        <a-form-item label="角色分配" required>
                            <a-select v-model:value="userParams.role_id" placeholder="请选择角色">
                                <a-select-option
                                    v-for="roleItem in roleList"
                                    :value="roleItem._id"
                                >{{ roleItem.name }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="12" :xs="24">
                        <a-form-item label="性别" required>
                            <a-select v-model:value="userParams.gender">
                                <a-select-option value="男">男</a-select-option>
                                <a-select-option value="女">女</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-divider />
                    <a-col :span="24">
                        <a-form-item label="备注">
                            <a-textarea v-model:value="userParams.remark" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <div class="ant-drawer-footer">
                <a-button class="mr-12">取消</a-button>
                <a-button type="primary">确定</a-button>
            </div>
        </a-drawer>
    </div>
</template>
<script lang='ts'>
import { defineComponent, ref, reactive, computed } from 'vue';
import { getUserList, UserRes } from '@/api/user';
import { PlusOutlined } from '@ant-design/icons-vue';
import { useStore } from '@/store/store';
import { getRoleList, RoleRes } from '@/api/user';
export default defineComponent({
    name: 'user',
    components: { PlusOutlined },
    setup() {
        const store = useStore()
        const winType = computed(() => store.state.app.winType)
        const filterData = reactive({
            name: '',
        })
        const userTableLoading = ref(false)
        const userColumns = [
            {
                title: '序号',
                dataIndex: 'number',
                width: 90,
                slots: { customRender: 'number' },
            },
            {
                title: '集团账号',
                dataIndex: 'account_id',
                width: 90,
            },
            {
                title: '登录账号',
                dataIndex: 'loginName',
                width: 140,
            },
            {
                title: '用户名',
                dataIndex: 'name',
                width: 140,
            },
            {
                title: '角色',
                dataIndex: 'roleName',
                slots: { customRender: 'roleName' },
                width: 160,
                align: 'center'
            },
            {
                title: '邮箱',
                dataIndex: 'email',
                width: 180,
            },
            {
                title: '手机号',
                dataIndex: 'phone',
                width: 120,
            },
            {
                title: '性别',
                dataIndex: 'gender',
                slots: { customRender: 'gender' },
                width: 90,
                align: 'center'
            },
            {
                title: '备注',
                dataIndex: 'remark',
                ellipsis: true,
            },
            {
                key: "operation",
                title: '操作',
                slots: { customRender: 'operation' },
                width: 120,
                fixed: 'right',
                align: 'center'
            },
        ]
        const userList = ref<UserRes[]>([])
        const onGetUserList = async () => {
            userTableLoading.value = true
            const res = await getUserList()
            userList.value = res
            userTableLoading.value = false
        }
        onGetUserList()
        const roleList = ref<RoleRes[]>([])
        getRoleList().then(res => { roleList.value = res })

        type User = {
            role_id?: string;//角色Id
            name: string;//用户名
            gender: '男' | '女';
            loginName: string;//登录账号
            email: string;
            phone: string;
            remark: string;
        }
        const userParams = reactive<User>({
            name: '',
            loginName: '',
            gender: '男',
            email: '',
            phone: '',
            remark: '',
        })
        const drawerVisible = ref(false)
        const drawerTitle = ref('')
        const onNewUser = () => {
            drawerVisible.value = true
            drawerTitle.value = '添加用户'
            userParams.name = ''
            userParams.gender = '男'
            userParams.loginName = ''
            userParams.email = ''
            userParams.phone = ''
            userParams.remark = ''
        }
        const onEditUser = (val: User) => {
            drawerVisible.value = true
            drawerTitle.value = '编辑用户'
            userParams.role_id = val.role_id
            userParams.name = val.name
            userParams.gender = val.gender
            userParams.loginName = val.loginName
            userParams.email = val.email
            userParams.phone = val.phone
            userParams.remark = val.remark
        }
        return {
            winType,
            filterData,
            onGetUserList,
            roleList,
            userTableLoading,
            userColumns,
            userList,
            drawerTitle,
            drawerVisible,
            userParams,
            onNewUser,
            onEditUser
        }
    },
})
</script>